<template>
  <div class="people-list">
    <div class="nav-bar-wrap">
       <van-nav-bar title="组织名称"/>
    </div>
    <van-cell-group class="" style="margin-top:62px;">
      <van-search  class="search" placeholder="搜索成员..部门" v-model="searchValue" />
    </van-cell-group>
    <van-cell-group>
      <div v-for="(item, index) in list" :key="index">
          <van-cell :value="item.status" v-if="item.isUser" class="van-hairline hairline">
            <template slot="title">
              <div class="img-wrap"></div>
              <span class="van-cell-text name-wrap">{{item.nickName}}</span>
            </template>
          </van-cell>
          <van-cell is-link v-if="!item.isUser" arrow-direction="right">
            <template slot="title">
              <span class="img-wrap"></span>
              <span class="van-cell-text name-wrap">{{item.nickName}}</span>
            </template>
            <i  class="van-icon van-icon-arrow van-cell__right-icon"></i>
          </van-cell>
      </div>
      <!-- <van-cell value="离线">
        <template slot="title">
          <span class="img-wrap"></span>
          <span class="van-cell-text name-wrap">昵称</span>
        </template>
      </van-cell> -->
    </van-cell-group>
  </div>
</template>

<script>
import api from '../../api/meeting.api.js'
import {
  Search,
  Cell,
  CellGroup,
  Checkbox,
  CheckboxGroup,
  Card,
  icon,
  Row,
  Col,
  NavBar
} from 'vant'
export default {
  components: {
    [Search.name]: Search,
    [CellGroup.name]: CellGroup,
    [Checkbox.name]: Checkbox,
    [CheckboxGroup.name]: CheckboxGroup,
    [Card.name]: Card,
    [Cell.name]: Cell,
    [icon.name]: icon,
    [Row.name]: Row,
    [Col.name]: Col,
    [NavBar.name]: NavBar
  },
  data() {
    return {
      checked: false,
      checked3: false,
      checked4: false,
      searchValue: '',
      list: [
        {
          isUser: true,
          nickName: '测试a',
          loginId: '',
          onlineStatus: 0,
          id: '',
          status:'会议中'
        },
        {
          isUser: true,
          nickName: '测试b',
          loginId: '',
          onlineStatus: 0,
          id: '',
          status:'离线'
        },
        {
          isUser: true,
          nickName: '部门1',
          loginId: '',
          onlineStatus: 0,
          id: ''
        }
      ],
      result: []
    }
  },
  methods: {
    initData() {
      let searchDepartData = {
        cmdid: 'search_department_ids', // 必填
        filter_type: [], // 选填， list 型 查询所有传[]
        filter_value: [], // 选填， list 型， 和filter_type数组长度必须相等， 且值与 filter_type 中的过滤项一一对应
        sortby: 'senior_id' // （此值可以是过滤项注释中的选项）希望结果按什么条件进行排序
      }
      api.searchPeople(searchDepartData).then(res => {
        let subDepartData = {
          cmdid: 'subscribe_department', // 必填
          department_ids: res.data.department_ids, // 必填 订阅的部门id
          last_modify_dtms: [0, 0, 0, 0, 0, 0, 0, 0, 0] // 必填， list 型 内部包含 int 型的时间戳，与 department_id 一一对应， 上次修改的时间戳， 单位： 秒。当 department_id 的 last_modify_dtm 大于请求中的该部门对应的 last_modify_dtm 时， 服务器将返回该部门信息， 否则将不予返回。 首次请求时， last_modify_stm 为 0。
        }
        api.searchDepartments(subDepartData).then(resData => {
          let getDepartData = {
            cmdid: 'get_department', // 必填
            department_id: resData.data.department_ids[0], // 必填， int 型， 部门ID
            last_modify_dtm: resData.data.last_modify_dtms, // 必填， int 型， 上次修改的时间戳， 单位： 秒
            option: 'usr', // 必填， str 型， 只能填写 usr
            activate: 0 // 选填， int 型， 当 option 为 usr/endpoint/manager 时， 如果此值不传， 表示获取所有 用户/终端/管理员/用户和管理员 的 login_id 和 usr_id 信； 当此值为 0 时， 表示获取账户状态为 未激活 的 用户/终端/管理员/用户和管理员 的 login_id 和 usr_id 信息； 当此值为 1 时， 表示获取账户状态为 激活 的 用户/终端/管理员/用户和管理员 的 login_id 和 usr_id 信息； 当此值为 2 时， 表示获取账户状态为 被禁用 的 用户/终端/管理员/用户和管理员 的 login_id 和 usr_id 信息；当此值为 3 时， 表示获取账户状态为 启用（激活或未激活） 的 用户/终端/管理员/用户和管理员 的 login_id 和 usr_id 信息；
          }
          api.searchChildren(getDepartData).then(result => {
            console.log(result)
          })
        })
      })
    }
  },
  mounted() {
    this.initData()
  }
}
</script>

<style scoped lang='less'>
.people-list {
  font-size: 12px;
  .search{

  }
  .hairline::after{
    left: 12px;
    right: 0;
    width: auto;
    -webkit-transform: scale(1,.5);
    transform: scale(1,.5);
    border-bottom-width: 1px;
  }
  .check-wrap {
    display: inline-block;
    width: 40px;
  }
  .name-wrap {
    padding-left: 5px;
  }
  .img-wrap {
    display: inline-block;
    float: left;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    position: relative;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #eee;
  }
  .card-goods {
  }
}
</style>